/**
 * Created by zzy on 2017/9/25.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    PixelRatio,
    Animated
} from 'react-native';
import {observer} from "mobx-react";
import shoppingCartStore from '../store/ShoppingCartStore'

@observer
export default class FloatShoppingCart extends Component{
    constructor(props){
        super(props);
        this.state = {
            bounceValue:new Animated.Value(1)
        }
    }
    animateShoppingCart(){
        this.state.bounceValue.setValue(1.8) ;   // 设置一个较大的初始值
        Animated.spring(                          // 可选的基本动画类型: spring, decay, timing
            this.state.bounceValue,                 // 将`bounceValue`值动画化
            {
                toValue: 1,                         // 将其值以动画的形式改到一个较小值
                friction: 1,                          // Bouncier spring
            }
        ).start() ;                             // 开始执行动画
    }
    render(){
        let {callback}=this.props;
        return <View>
            <TouchableOpacity
                onPress={callback}
                activeOpacity={0.95}
                style={{
                    position: 'absolute',
                    bottom: 20,
                    right: 20
                }}>
                <Image source={require('../../asserts/home/Shopping-Cart.png')}/>
                <Animated.View
                    style={{transform:[                        // `transform`是一个有序数组（动画按顺序执行）
                        {scale: this.state.bounceValue}],height:22,borderRadius:11,backgroundColor:'red',position:'absolute',right:0,top:0,justifyContent:'center',alignItems:'center'}}>
                    <Text style={{color:'#fff',fontSize:this.state.fontSize}}>{'  '+shoppingCartStore.selectCount+'  '}</Text>
                </Animated.View>
            </TouchableOpacity>
        </View>
    }
}